<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
</head>
<style>
    .item{
        width: 300px;
        height: 300px;
        text-align: center;
        margin: 0 auto;
    }
    .item .album img{
        width: 260px;
        height: 150px;
        border-radius: 10px;
    }
    /*消除下划线*/
    .item .info h3{
        overflow: hidden;/*text-of必须和这个搭配使用！*/
        /*white-space: nowrap;/*不换行单行*/
        text-overflow: ellipsis;/*设置溢出部分用省略号*/
        /*多行设置省略号*/
        display: -webkit-box;
        -webkit-line-clamp: 2;/*必须写，表示几行文本省略*/
        -webkit-box-orient: vertical;/*必须写，这些都是固定搭配！*/
    }
    .item .anchor 
    {   
        color: #888;
    }
    
</style>
<body>
    <!--外部大盒子-->
    <div class="item">
        <!--图片-->
        <div class="album">
            <img src="../img/jackson.jpg" alt="图片不存在">
            
        </div>
        <!--描述信息-->
        <div class="info">
            <h3>【杰克逊乐队】Beat It【1984年胜利之旅】 just beat it!just beat it! just beat it! just beat it! </h3>
            <!--作者相关-->
            <div class="anchor">
                <span class="nickename">Hadeless</span>
                <span class="time">2016-10-1</span>
            </div>
        </div>
    </div>
</body>
</html>